<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>素材牛 - 后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="__SKIN__/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__SKIN__/workflow/css/control.css" type="text/css" />
</head>
<body>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>当前流程进度</legend>
</fieldset>
<div class="ystep"></div>
<div id="stepBar" class="ui-stepBar-wrap">
    <div class="ui-stepBar">
        <div class="ui-stepProcess"></div>
    </div>
<div class="ui-stepInfo-wrap">
    <table  class="ui-stepLayout" border="0" cellpadding="0" cellspacing="0">
        <tr id="process">

        </tr>
    </table>
</div>
</div>
<div id="time_line" class="layui-row">

</div>

<script src="__SKIN__/js/jquery.js"></script>
<script type="text/javascript" src="__SKIN__/workflow/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="__SKIN__/workflow/js/stepBar.js"></script>
<script src="__SKIN__/workflow/js/form_assembly.js" charset="utf-8"></script>
<script src="__SKIN__/js/layui/layui.js" charset="utf-8"></script>
<script>
    $(function(){
        e = top.workflow;
        var get_progress =  "{:url('Workflowajax/get_progress')}";
        var data = ajax(get_progress,{'id':e.id})
        var html = ""
        $.each(data.data.list,function(k,v){
            html +='<td class="ui-stepInfo">';
            html +='<a class="ui-stepSequence">'+v.level+'</a>';
            html +='<p class="ui-stepName">'+v.title+'</p>';
            html +='</td>';
        })
        $('#process').html(html);
        stepBar.init("stepBar", {
            step : data.data.now,
            change : false,
            animation : true
        });
    });

    layui.use(['table','form','layer','upload','element'], function(){
        var $ = layui.$
            ,form = layui.form;
        layer.ready(function(){
            e = top.workflow
            let process_url = "{:url('Workflowajax/get_detail_flow')}";
            let res = ajax(process_url,e);
            let html = '';
            html += loadline('时间轴');
            html += flowtimeline(res.data);
            $("#time_line").html(html);
        });
    });
    /*********************ajax方法*************************/
    var ajax = function(url,data){
        var arr = {};
        $.ajax({
            url:url,
            type:'post',
            data:data,
            dataType:"html",
            async: false,//关闭异步
            success:function(e){
                arr = eval('(' + e + ')');
            }
        });
        return arr;
    }
    /**************************拼装工作流时间轴***************************/
    var flowtimeline = function(e){
        let html = '';
        html+= '<ul style="padding:15px;" class="layui-timeline">';
        $.each(e,function(k,v){
            html+= '<li class="layui-timeline-item">';
            html+= '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
            html+= '<div class="layui-timeline-content layui-text">';
            html+= '<h3 class="layui-timeline-title">'+v.time+'</h3>';
            html+= '<h4><span>操作人：</span>'+v.username+'</h4>';
            html+= '<p>';
            html+= '<br><span>操作:</span>';
            if(v.type == 'create'){
                html+='<b style="color: #fae475">创建</b>';
            }else if(v.type == 'adopt'){
                html+='<b style="color: #00A000">审核通过</b>';
            }else if(v.type == 'repulse'){
                html+='<b style="color: #fd0315">打回</b>';
            }else if(v.type == 'end'){
                html+='<b style="color: #00A000">结束</b>';
            }else if(v.type == 'repeat'){
                html+='<b style="color: #376506">重发</b>';
            }else if(v.type == 'recall'){
                html+='<b style="color: #ffdd05">撤回</b>';
            }
            html+= '<br><span>留言/评语:</span>';
            html+=  v.content;
            html+= '</p>';
            html+= '</div>';
            html+= '</li>';
        });
        html+= '</ul>';
        return html;
    }
</script>

